<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
  <title>King Music</title>
  <link rel="stylesheet" href="<%=request.getContextPath()%>/static/plugins/bootstrap-4.6.2-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/static/plugins/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css">
  <style>
    body {
      /* 设置背景图片路径，根据实际情况调整 */
      background-image: url('<%=request.getContextPath()%>/static/images/background/img.png');
      /* 背景图片不重复 */
      background-repeat: no-repeat;
      /* 背景图片尺寸为覆盖整个页面 */
      background-size: cover;
      /* 背景图片固定，不随页面滚动而滚动 */
      background-attachment: fixed;
    }
  </style>
</head>
<body>

<div class="container mt-4">
  <h1 class="text-center">个人上传歌曲</h1>
  <div class="row">
    <div class="col-12">
      <table class="table table-hover">
        <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">歌曲id</th>
          <th scope="col">歌名</th>
          <th scope="col">上传路径</th>
          <th scope="col">歌曲描述</th>
          <th scope="col">上传者id</th>
          <th scope="col">分类</th>
          <th scope="col">操作</th>
        </tr>
        </thead>
          <tbody>
        <c:forEach items="${requestScope.songs}" var="song" varStatus="status">
          <tr>
            <th scope="row">${status.index + 1}</th>
            <td>${song.songId}</td>
            <td>${song.title}</td>
            <td>${song.filePath}</td>
            <td>${song.description}</td>
            <td>${song.uploaderId}</td>
            <td>${song.categoryId}</td>
            <td>
              <!-- Trigger modal -->
              <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#editSongModal"
                      data-song-id="${song.songId}" data-title="${song.title}" data-file-path="${song.filePath}"
                      data-description="${song.description}" data-uploader-id="${song.uploaderId}"
                      data-category-id="${song.categoryId}">
                修改
              </button>
              <a href="<%=request.getContextPath()%>/song/delete?id=${song.songId}" class="btn btn-danger btn-sm" onclick="return confirm('你确认要删除吗？');">删除</a>
            </td>
          </tr>
        </c:forEach>
        </tbody>
      </table>
    </div>
  </div>

  <!--编辑歌曲表单 -->

  <!-- 编辑歌曲表单 -->
  <div class="modal fade" id="editSongModal" tabindex="-1" aria-labelledby="editSongModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="editSongModalLabel">编辑歌曲</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="editSongForm" method="post" action="<%=request.getContextPath()%>/song/update" enctype="multipart/form-data">
            <input type="hidden" id="songId" name="songId">
            <div class="form-group">
              <label for="songTitle">歌名</label>
              <input type="text" class="form-control" id="songTitle" name="title" required>
            </div>
            <div class="form-group">
              <label for="songFilePath">上传路径</label>
              <input type="text" class="form-control" id="songFilePath" name="filePath" required>
            </div>
            <div class="form-group">
              <label for="songDescription">歌曲描述</label>
              <textarea class="form-control" id="songDescription" name="description" rows="3"></textarea>
            </div>
            <div class="form-group">
              <label for="uploaderId">上传者ID</label>
              <input type="text" class="form-control" id="uploaderId" name="uploaderId" required>
            </div>
            <div class="form-group">
              <label for="categoryId">分类</label>
              <input type="text" class="form-control" id="categoryId" name="categoryId" required>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          <button type="submit" form="editSongForm" class="btn btn-primary">保存更改</button>
        </div>
      </div>
    </div>
  </div>

</div>

<script src="<%=request.getContextPath()%>/static/plugins/jquery/jquery.slim.min.js"></script>
<script src="<%=request.getContextPath()%>/static/plugins/bootstrap-4.6.2-dist/js/bootstrap.bundle.js"></script>

<script>
  // 使用 jQuery 设置弹框的值
  $('#editSongModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // 按钮触发事件
    var songId = button.data('song-id');
    var title = button.data('title');
    var filePath = button.data('file-path');
    var description = button.data('description');
    var uploaderId = button.data('uploader-id');
    var categoryId = button.data('category-id');

    // 更新弹框中的字段
    var modal = $(this);
    modal.find('#songId').val(songId);
    modal.find('#songTitle').val(title);
    modal.find('#songFilePath').val(filePath);
    modal.find('#songDescription').val(description);
    modal.find('#uploaderId').val(uploaderId);
    modal.find('#categoryId').val(categoryId);
  });
</script>

</body>
</html>
